<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>学生</title>
  <!-- <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
  <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/student.css" /> -->
  <style>
	  #main{
		  border:  1px solid #ccc;
	  }
  </style>
</head>

	<body>
		
		
		
		  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
		  <div id="main" style="width: 600px;height:400px; margin: 20px auto;"></div>
		  
		  <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
		  
		  <script>
			  // 食物数据
			     const foodArr = [
			       { name: '西兰花', price: 150 },
			       { name: '西瓜', price: 230 },
			       { name: '西葫芦', price: 224 },
			       { name: '西北风', price: 34 },
			       { name: '西红柿', price: 135 },
			       { name: '西芹', price: 147 },
			       { name: '西洋菜', price: 260 },
			     ]
				
			    // 基于准备好的dom，初始化echarts实例
			        const myChart = echarts.init(document.getElementById('main'));
			  
			        // 指定图表的配置项和数据
			        const option = {
						// 标题
			          title: {
						  // 标题文本
			            text: '食物售价',
						// 标题文字大小
						textStyle:{
							fontSize:20
						}
						// target:self
			          },
			          tooltip: {},
					  // 图例组件
			          legend: {
						  // 图例组件的名称，如果是饼图可以为单个，柱状图需要与series的name属性一致
			            data: ['价格'],
						// 距离右侧5%的距离
						right:"5%"
			          },
					  // 直角坐标系内绘图网格
					  grid:{
						  // 本	坐标系特定的 tooltip 设定。
						  tooltip:{
							  // 触发类型。
							  trigger:"axis"
						  }
					  },
					  // x轴
			          xAxis: {
						  // 数据的名称
			            data: foodArr.map(v => v.name)
			          },
			          yAxis: {
						  // 坐标轴在 grid 区域中的分隔线。
						  splitLine:{
							  lineStyle:{
								  // 线的类型。
								  type:"dashed"
							  }
						  },
						  // 坐标轴轴线相关设置。
						  axisLine:{
							  lineStyle:{
							  		 // 线的类型。
							  		 type:"solid"
							  }
						  }
					  },
					  // 图表类型
			          series: [
			            {
			// 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
			              name: '价格',
						  // 柱状图
			              type: 'bar',
						  // 系列中的数据内容数组。数组项通常为具体的数据项。
			              data: foodArr.map(v => v.price)
			            }
			          ],
					  // 调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
					  color:['#83d9ff']
			        };
			  
			        // 使用刚指定的配置项和数据显示图表。
			        myChart.setOption(option);
		  </script>
	
	</body>
</html>